<template>
	<view class="container">
		<view class="main">
			<view class="logo">
			</view>
			<img class="logo" src="../../static/logo1.png" alt="">
			<view class="login">
				<uni-forms :modelValue="formData">
					<uni-forms-item label="用户ID:" name="name">
						<uni-easyinput type="text" v-model="formData.userId" placeholder="请输入ID" />
					</uni-forms-item>
				</uni-forms>
				<button @click="login" class="btn">登录</button>
			</view>
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="msgRef" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		Auth
	} from '../../service/index.js'
	import {
		result
	} from '../../helpers/utils/index.js'
	const formData = reactive({
		userId: ''
	})
	// 弹窗相关
	const msgType = ref('error')
	const msgTypeArr = ['success','error']
	const messageText = ref('无此ID信息')
	const msgRef = ref()
	const login = async () => {
		// console.log(formData.userId)
		const res = await Auth.login(formData.userId)
		result(res).success(({
			data
		}) => {
			// console.log(data)
			uni.setStorage({
				key: 'userInfo',
				data,
				success: function () {
					uni.redirectTo({
						url: '../main/index'
					});
				}
			});
			uni.getStorage({
				key: 'userInfo',
				success: function (res) {
					console.log(res.data);
				}
			});
		})
	}
</script>

<style lang='scss'>
	.container {
		/* 		padding: 20px;
		font-size: 14px; */
		position: fixed;
		line-height: 24px;
		width: 100%;
		height: 100%;
		transform: translate(0, -5%);
		background: repeat center/100% url('../../static/bg.jpg');

		.main {
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: column;
			transform: translate(0, -12%);
			height: 100%;
			padding: 0 10%;
			.logo {
				width: 45%;
			}

			.login {
				box-sizing: border-box;
				height: 25%;
				width: 100%;
				/* transform: translateY(-50%); */
				border-radius: 5px;
				background-color: #fff;
				opacity: .8;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				padding: 5%;

				.btn {
					width: 86%;
				}
			}
		}
	}
</style>
